<template>
	<body-wrap :isFlex='true' @loadMore="getList" :status='status' :showLoading="lists && lists.length>0">
		<template v-slot:header>
			<c-tab @onclick="tabChange" :lists="tabList" returnKey="id"/>	
		</template>
		<view class="tabcon">
			<keep-list :lists="lists"/>
			<empty v-if="lists && lists.length==0"/>
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import cTab from "@/components/cTab/cTab.vue"
	import keepList from "./components/keepList.vue"
	import {empty} from "@/components/empty/empty.vue"
	import {getServiceList,getCategoryList} from "@/api/index.js"
	export default defineComponent({
		components:{
			bodyWrap,
			cTab,
			keepList
		},
		props:{
			
		},

		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				status:'loading',
				isFlex:true,
				lists:'',
				params:{
					pageNumber:1,
					pageSize:20,
					categoryId:''
				},
				ctgId:13001,
				tabList:[
					{id:13001,name:'吾老学堂'},
					{id:13002,name:'非遗工坊'},
					{id:14,name:'居家互助'}
				]
			})
			
			const tabChange = (ctgId)=>{
				state.lists = ''
				state.params.pageNumber = 1
				state.status = 'loading'
				state.ctgId = ctgId
				getList()
			}
			
			onMounted(()=>{
				getList()
			})
			
			const getList = async ()=>{
				if(state.status == 'noMore') return;
				
				if(state.ctgId == 14){ // 居家互助
					state.params.categoryId = 0
					state.params.topCategoryId = state.ctgId
				}else{
					state.params.categoryId = state.ctgId
					state.params.topCategoryId = 13
				}
				const res = await getServiceList(state.params)
				if(!state.lists){
					state.lists = res.data.list || []
				}else{
					state.lists = [...state.lists,...res.data.list]
				}
				if(state.lists.length>=res.data.total){
					state.status = 'noMore' // 数据加载完成了
				}else{
					state.status = 'loading'
				}
				state.params.pageNumber++
			}
			
			
			return {
				...toRefs(state),
				tabChange,
				getList
			}
		}
	})
</script>

<style lang="scss" scoped>
	
	
</style>
